<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式操作</title>
		<!-- 元素样式操作， 直接操作元素的样式下的属性和属性值 
		  css()           功能：
		                    1个参：传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性值
						   2个参 传入css属性名和属性值
						     功能：设置匹配元素集合中所有元素的css属性值
						   n个参  传入多个css属性名和属性值
						     语法糖：css({"属性名"："属性值",})
		  width()和height()   功能：匹配元素集合中第一个元素宽高度
		                      无参：获取匹配元素集合中第一个元素宽高度
							  有参：设置匹配元素集合中第一个元素宽高度
							  width(数值)
		  outerWidth()和outerHeight()
		   出现原因：元素存在盒子中，盒子模型，宽度计算方式，内外边距+边框+内容
		   无参：获取元素的宽高度，计算机盒子模型，内边距+边框
		   有参：传入bool值，true时，计算盒子模型：内外边距+边框
		-->
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			.box{
				width: 700px;
				background-color: aquamarine;
				border: 5px solid skyblue;
				margin: 20px;
				padding: 20px;
			}
			.result{
				margin: 10px;
				font-weight: 700;
			}
		</style>
	</head>
	<body>
		<!-- 1.显示效果区域 -->
		<div class="box" id="targertBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色按钮</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn">获取元素宽度/设置元素宽度</button>
		<button id="bpBtn">获取高度（包含内边距+边框）</button>
		<button id="bpmBtn">湖区高度（内外边距+边框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result"></div>
		
		<script>
			/* 1.点击 */
			$("#getColorbtn").click(function(){
			  var t=$(".box").css("background-color");
			  $(".result").text("颜色值是："+t);
				});
			
			
			$("#setColorbtn").click(function(){
			   $(".box").css("background-color","#ff6700");
			   $(".result").text("改变后的颜色为橙色");
				});
				$("#setBtn").click(function(){
					$(".box").css({"border-radius":"50%",
					    "background-color":"pink",
						"box-shadow":"10px 7px 7px #eaadea",
						"border":"5px solid orange",
						"background-image":"url(../img/1.gif)",
						"background-size":"100% 100%"
					});
				});
				
				$("#gsBtn").click(function(){
				var winter=$(".box").width(200);
				$(".result").text("获取的宽度是："+winter);
				});
				
				$("#bpBtn").click(function(){
					var summer=$(".box").outerHeight();
					$(".result").text("获取的高度是："+summer);
				});
				
				$("#bpmBtn").click(function(){
					var spring=$(".box").outerHeight(true);
					$(".result").text("获取高度为："+spring)
				})
		</script>
	</body>
</html>